@tailwind base;
@tailwind utilities;
@tailwind components;

@layer base {
  a {
    cursor: pointer;
    color: #374151;
    word-break: break-word;
  }
  
  .liked {
    color: var(--base-hover-color)
  }

  .fade-down {
    -webkit-animation: fade-down 0.3s;
    animation: fade-down 0.3s;
  }
  
  .bg-box-shadow {
    cursor: pointer;
    box-shadow: inset 0 0 #e5e7eb;
    transition: box-shadow .5s cubic-bezier(.71,0,0,.99);
    text-decoration: none;
  }
  
  .bg-box-shadow.active,
  .bg-box-shadow:hover {
    border: none;
    box-shadow: inset 0 -0.8em #e5e7eb;
  }
  
  .back-2-top:hover .icon-top {
    -webkit-animation-name: hvr-icon-up;
    animation-name: hvr-icon-up;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  .back-2-top {
    z-index: 999;
  }
  
  .fade-up {
    -webkit-animation: fade-up 0.3s;
    animation: fade-up 0.3s;
  }

  .placeholder-bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    -webkit-animation: gradientBG 15s ease infinite;
    -moz-animation: gradientBG 15s ease infinite;
    animation: gradientBG 15s ease infinite;
    bottom: 0;
    left: 0;
    opacity: 0.3;
    position: absolute;
    right: 0;
    top: 0;
  }

  .cover-bg {
    -webkit-animation: fadein 1s ease-in-out;
    animation: fadein 1s ease-in-out;
    z-index: -1;
  }

  ::-webkit-scrollbar {
    width: 0.3rem;
    height: 0.5rem;
    background: hsla(0, 0%, 100%, 0.6);
  }

  ::-webkit-scrollbar-track {
    border-radius: 0;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(95, 95, 95, 0.4);
    transition: all 0.2s;
    border-radius: 0.5rem;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(95, 95, 95, 0.7);
  }

  @font-face {
    font-family: 'Lato';
    src: url('./fonts/Lato-LightItalic.woff2') format('woff2'),
    url('./fonts/Lato-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Lato';
    src: url('./fonts/Lato-BoldItalic.woff2') format('woff2'),
    url('./fonts/Lato-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Lato';
    src: url('./fonts/Lato-Bold.woff2') format('woff2'),
    url('./fonts/Lato-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Lato';
    src: url('./fonts/Lato-Regular.woff2') format('woff2'),
    url('./fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Lato';
    src: url('./fonts/Lato-Italic.woff2') format('woff2'),
    url('./fonts/Lato-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Lato';
    src: url('./fonts/Lato-Light.woff2') format('woff2'),
    url('./fonts/Lato-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  /* noto-sans-sc-300 - latin */
  @font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 300;
    src: local('Noto Sans SC Light'), local('NotoSansSC-Light'),
    url('./fonts/noto-sans-sc-v11-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./fonts/noto-sans-sc-v11-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* noto-sans-sc-regular - latin */
  @font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans SC Regular'), local('NotoSansSC-Regular'),
    url('./fonts/noto-sans-sc-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./fonts/noto-sans-sc-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* noto-sans-sc-500 - latin */
  @font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 500;
    src: local('Noto Sans SC Medium'), local('NotoSansSC-Medium'),
    url('./fonts/noto-sans-sc-v11-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./fonts/noto-sans-sc-v11-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* noto-sans-sc-700 - latin */
  @font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans SC Bold'), local('NotoSansSC-Bold'),
    url('./fonts/noto-sans-sc-v11-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./fonts/noto-sans-sc-v11-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* noto-sans-sc-900 - latin */
  @font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 900;
    src: local('Noto Sans SC Black'), local('NotoSansSC-Black'),
    url('./fonts/noto-sans-sc-v11-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./fonts/noto-sans-sc-v11-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  @font-face {
    font-family: "iconfont"; /* Project id 2025344 */
    src: url('./fonts/iconfont.woff2?t=1649612262475') format('woff2'),
    url('./fonts/iconfont.woff?t=1649612262475') format('woff'),
    url('./fonts/iconfont.ttf?t=1649612262475') format('truetype');
  }
  
  @keyframes fade-down {
    0% {
      transform: translateY(-20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @-webkit-keyframes fade-down {
    0% {
      -webkit-transform: translateY(-20px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fade-up {
    0% {
      transform: translateY(20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @-webkit-keyframes fade-up {
    0% {
      -webkit-transform: translateY(20px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      opacity: 1;
    }
  }

  @-moz-keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.3;
    }
  }

  @-webkit-keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.3;
    }
  }

  @keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.3;
    }
  }

  @-webkit-keyframes blink {
    0% {
      opacity: 1;
      transform: translateY(-10px);
    }
    25% {
      opacity: 1;
    }
    75% {
      opacity: 0;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes blink {
    0% {
      opacity: 1;
      transform: translateY(-10px);
    }
    25% {
      opacity: 1;
    }
    75% {
      opacity: 0;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
    }
  }


  @-moz-keyframes gradientBG {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }

  @-webkit-keyframes gradientBG {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }

  @keyframes gradientBG {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }


  @-webkit-keyframes searchShow {
    0% {
      transform: translate3d(0, -4rem, 0);
      opacity: 0
    }
    to {
      transform: none;
      opacity: 1
    }
  }

  @keyframes searchShow {
    0% {
      transform: translate3d(0, -4rem, 0);
      opacity: 0
    }
    to {
      transform: none;
      opacity: 1
    }
  }

  @-webkit-keyframes hvr-icon-up {
    0%,
    50%,
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    25%,
    75% {
      -webkit-transform: translateY(-6px);
      transform: translateY(-6px);
    }
  }
  @keyframes hvr-icon-up {
    0%,
    50%,
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    25%,
    75% {
      -webkit-transform: translateY(-6px);
      transform: translateY(-6px);
    }
  }
}

@layer utilities {
  @variants dark {
    .filter-60 {
      filter: brightness(0.6);
    }
  }
}